import React from "react";
import styles from "./index.module.less";
import SvgIcon from "@components/SvgIcon";
import { connect } from "react-redux";
import { isInSearch, addSearchValue } from "@redux/actions02";

const AddFriendSearchMould = (props) => {
    const { isInSearch, addSearchValue } = props;

    const handleCancle = () => {
        isInSearch(false);
        addSearchValue("");
    };

    return (
        <div className={styles.search_wrap}>
            <div className={styles.search_main}>
                <div className={styles.search_icon}>
                    <SvgIcon font="icon-tongxunlu" />
                </div>
                <input
                    type="text"
                    className={styles.inner}
                    placeholder="用户名/uid"
                    onChange={(e) => {
                        addSearchValue(e.target.value);
                    }}
                />
                <div className={styles.x} onClick={handleCancle}>
                    <div className={styles.x_icon}>
                        <SvgIcon font="icon-cuowuguanbiquxiao-yuankuang" />
                    </div>
                </div>
            </div>
            <p className={styles.cancel} title="取消" onClick={handleCancle}>
                取消
            </p>
        </div>
    );
};

export default connect((state) => state, { isInSearch, addSearchValue })(
    AddFriendSearchMould
);
